<template>
  <el-row class="mosWrap">
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 1">G1501</div>
      <div class="tableHeader" style="flex: 1">G1113</div>
      <div class="tableHeader" style="flex: 1">G15</div>
      <div class="tableHeader" style="flex: 1">G1</div>
      <div class="tableHeader" style="flex: 1;border-right: 1px solid rgba(102,153,153,0.5);">S3</div>
    </el-row>
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 1">{{ '沈阳绕城高速' }}</div>
      <div class="tableHeader" style="flex: 1">{{ '沈阜高速' }}</div>
      <div class="tableHeader" style="flex: 1">{{ '沈海高速' }}</div>
      <div class="tableHeader" style="flex: 1">{{ '京哈高速' }}</div>
      <div class="tableHeader" style="flex: 1;border-right: 1px solid rgba(102,153,153,0.5);">{{ '沈桃高速' }}</div>
    </el-row>
    <el-row class="tableBody">
      <div class="tableName" style="flex: 1">{{ 90 }}</div>
      <div class="tableName" style="flex: 1">{{ 96 }}</div>
      <div class="tableName" style="flex: 1">{{ 98 }}</div>
      <div class="tableName" style="flex: 1">{{ 99 }}</div>
      <div class="tableName" style="flex: 1;">{{ 92 }}</div>
    </el-row>
  </el-row>
</template>

<script>
  export default {
    name: 'TableLeft',
    props: {
      dataList1: {
        type: Array,
        default: ()=>[]
      },
      dataList2: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        dataType: 10
      }
    },
    methods: {
      clickedBtn(value) {
        this.dataType = value
        this.$bus.$emit('tableTypeChange', value)
      }
    }
  }
</script>

<style scoped>
.mosWrap{
}
.tableHeaderWrap{
  background: rgba(43,83,83,.7);
}
.tableHeader{
  flex: 1;
  color: #FFFFFF;
  border-top: 1px solid rgba(102,153,153,0.5);
  border-bottom: 1px solid rgba(102,153,153,0.5);
  border-left: 1px solid rgba(102,153,153,0.5);
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  padding: 4px 0;
}
.tableName{
  flex: 1;
  color: #FFFFFF;
  border-top: 1px solid rgba(102,153,153,0.5);
  border-bottom: 1px solid rgba(102,153,153,0.5);
  border-left: 1px solid rgba(102,153,153,0.5);
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  padding: 4px 0;
}
.tableBody{
  background: rgba(43,83,83,.7);
  display: flex;
}
</style>
